@import "theme";
@import "layout-config";

.divToolbarWrapper{
    width: fit-content;
    z-index: $z-index-toolbar;
}

.spanButtonWrapper{
    margin: 5px;
    padding: 8px 8px 5px;
    border-radius: 5px;
    background-color: $toolbar-button-background-color;
    color: $toolbar-button-text-color;
    cursor: pointer;

    user-select: none;

    box-shadow: 1px 1px 5px -2px rgba(0, 0, 0, 0.50);

    transition-duration: 100ms;

    &:hover{
        background-color: $toolbar-button-hover-background-color;
    }

    &:active{
        background-color: $toolbar-button-active-background-color;
    }
}

.spanButtonWrapperActive{
    color: $toolbar-button-text-active-color;
}

.spanButtonWrapperActiveSecond {
    color: $toolbar-button-text-active-second-color;
}

.spanButtonWrapperDisabled{
    color: $toolbar-button-text-disabled-color;
    cursor: default;

    &:hover {
        background-color: $toolbar-button-background-color;
    }

    &:active {
        background-color: $toolbar-button-background-color;
    }
}

.iButtonIcon{
    font-size: small;
}

.spanButtonText{
    font-size: small;
    margin-top: 3px;
}